<!-- 
@name: 登录页
-->
<template>
	<div>
		<div id="home" v-if="!$store.state.oldPage" class="page">
			<baidu-map map-type="BMAP_NORMAL_MAP" scroll-wheel-zoom :center="mapCenter" :zoom="12" @ready='mapReady' class="bm-view">
				<!-- 地图类型 -->
				<!-- <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_HYBRID_MAP','BMAP_NORMAL_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> -->
				<!-- 地图类型 end -->
				<my-overlay @overClick='' :ref="'overlay'+index" v-for="(item,index) in overlayList" :key="index" :position="item" :text="item.name" :active="false" @mouseover.native="active = true" @mouseleave.native="active = false">
				</my-overlay>
			</baidu-map>
			<div class="flex-between flex-center top">
				<div>{{($store.state.userList.patrolGroupNameList.length&&$store.state.userList.patrolGroupNameList[0])||'无组别'}}</div>
				<div>{{$store.state.userList.roles.length&&$store.state.userList.roles[0].roleName}}-{{$store.state.userList.userName}}</div>
			</div>
			<div class="bottom">
				<div class="flex-between flex-center" style="margin-bottom:0.26rem">
					<div>待办任务</div>
					<div style="font-size: 0.28rem;">已完成({{countList.finishedTaskCount}}) / 未完成({{countList.notFinishedTaskCount}})</div>
				</div>
				<div class="flex-row flex-center">
					<div :class="buttonIndex==1?'button1':'button2'" @click="buttonIndexFn(1)" style="margin-right:0.2rem">巡检任务({{countList.patrolTaskCount}})</div>
					<div :class="buttonIndex==2?'button1':'button2'" @click="buttonIndexFn(2)">预警任务({{countList.warningTaskCount}})</div>
				</div>
				<div class="list">
					<div class="item" v-for="item in taskList">
						<div style="font-size:0.28rem">{{item.taskRecordName}}</div>
						<div class="flex-between flex-alignCenter" style="margin-top:0.1rem">
							<div class="f1">需在<span class="f2">{{item.taskRecordEndDate}}</span>完成</div>
							<img class="right" @click="jump(`/taskDetail?id=${item.id}&buttonIndex=${buttonIndex}`)" src="@/assets/images/new/right.png" />
						</div>
					</div>

				</div>
			</div>
		</div>
		<bottomTabs></bottomTabs>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import MyOverlay from '@/components/map//MyOverlay.vue';
import bottomTabs from '@/components/global/bottomTabs';
import Qs from 'qs'; //引入qs  时axios的自带模块
var codeSetTime;
export default {
	name: 'app',
	components: {
		bottomTabs,
		MyOverlay,
	},
	data() {
		return {
			buttonIndex: 1,
			mapCenter: { lng: 106.445122, lat: 29.822616 },
			mapList: [],
			taskList: [],
			countList: {},
			overlayList: [
				// {
				// 	name: '城南新区摄像头01',
				// 	lng: 106.445122,
				// 	lat: 29.822616,
				// 	type: 0,
				// 	select: true,
				// },
				// {
				// 	name: '城南新区摄像头02',
				// 	lng: 106.555122,
				// 	lat: 29.922616,
				// 	type: 1,
				// 	select: false,
				// },
				// {
				// 	name: '城南新区摄像头03',
				// 	lng: 106.665122,
				// 	lat: 29.722616,
				// 	type: 2,
				// 	select: true,
				// },
			],
		};
	},

	created() {
		this.map_home();
		this.list_taskRecordAssignment();
		this.count_taskRecordAssignment();
	},
	methods: {
		buttonIndexFn(buttonIndex) {
			this.buttonIndex = buttonIndex;
			this.list_taskRecordAssignment();
		},
		count_taskRecordAssignment() {
			var params = {};
			this.$myApi.count_taskRecordAssignment(params).then((res) => {
				if (res.code == 200) {
					this.countList = res.data;
				} else {
				}
			});
		},
		list_taskRecordAssignment() {
			var params = {
				type: this.buttonIndex, //1:巡检任务 2:预警任务
				status:0,
			};
			this.$myApi.list_taskRecordAssignment(params).then((res) => {
				if (res.code == 200) {
					this.taskList = res.rows;
				} else {
				}
			});
		},
		map_home() {
			var params = {};
			this.$myApi.map_home(params).then((res) => {
				if (res.code == 200) {
					this.overlayList = res.rows;
					this.mapCenter = {
						lng: res.rows[0].longitude,
						lat: res.rows[0].latitude,
					};
				} else {
				}
			});
		},
		refTo() {
			window.location.href = 'https://vr.cvr720.com/2111/zydhze/';
		},
		jump(path) {
			this.$router.push(path);
		},
		mapReady(locationData) {
			return;
			console.log('locationData', locationData);
			let self = this;
			var map = new BMap.Map('allmap', {
				enableMapClick: false,
			});
			let point = new BMap.Point(120.65523, 28.014695);

			map.setMapType(BMAP_HYBRID_MAP);
			map.centerAndZoom(point, 15);
			// 地图比例尺
			map.addControl(
				new BMap.ScaleControl({
					anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
				})
			);
			// 鼠标滑动缩放
			map.enableScrollWheelZoom(true);
			// console.log(this.$refs.overlay0[0])
			// this.$refs.overlay0[0].draw()
		},
	},
};
</script>
<style lang="less" scoped>
#home {
	padding: 0.1rem 0.2rem;
	padding-bottom: 50px;
	position: relative;
	.list {
		height: 3.5rem;
		overflow: scroll;

		.item {
			padding-bottom: 0.2rem;
			border-bottom: 1px dashed #eee;
			margin-top: 0.2rem;
			.f1 {
				font-size: 0.24rem;
				color: #8d8d8d;
			}
			.f2 {
				font-size: 0.24rem;
				color: rgba(41, 71, 255, 1);
			}
		}
	}
	.button1 {
		background: #2947ff; /* height: 0.27rem; */
		/* width: 2rem; */
		position: relative;
		padding: 0.18rem 0.36rem;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 0.24rem;
		color: #ffffff;
		display: inline-block;
		border-radius: 20px;
	}
	.button2 {
		background: #eeeeee; /* height: 0.27rem; */
		/* width: 2rem; */
		position: relative;
		padding: 0.18rem 0.36rem;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 0.24rem;
		color: #5b5b5b;
		display: inline-block;
		border-radius: 20px;
	}
	.top {
		width: 7.08rem;
		height: 0.96rem;
		background: #ffffff;
		box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.05);
		border-radius: 48px 48px 48px 48px;
		box-sizing: border-box;
		padding: 0.2rem 0.6rem;
		font-weight: bold;
		font-size: 0.32rem;
		color: #000000;
		position: absolute;
		top: 0.26rem;
	}
	.bottom {
		width: 7.08rem;
		background: #ffffff;
		box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.05);
		border-radius: 30px;
		box-sizing: border-box;
		padding: 0.2rem 0.6rem;
		font-weight: bold;
		font-size: 0.32rem;
		color: #000000;
		position: absolute;
		bottom: 0.26rem;
		.right {
			height: 0.47rem;
			width: 0.47rem;
		}
	}
	.bm-view {
		// width: 100%;
		// height: 50vh;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
}
</style>